<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Obscura</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link href="css/captcha.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/media-queries.css" />
<link rel="stylesheet" type="text/css" href="css/player/mediaelementplayer.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,700,700italic|Open+Sans+Condensed:300,700' rel="stylesheet" type='text/css'>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9.css" media="all" />
<![endif]-->
<script src='js/jquery-1.8.0.min.js'></script>
<script src='js/md5.js'></script>
<script src='js/funciones.js'></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/retina.js"></script>
<script type="text/javascript" src="js/selectnav.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/mediaelement.min.js"></script>
<script type="text/javascript" src="js/mediaelementplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.dcflickr.1.0.js"></script>
<script type="text/javascript" src="js/twitter.min.js"></script>
<script>
$(document).ready(function() {
	 // refresh captcha
	 $('img#captcha-refresh').click(function() {  
			
			change_captcha();
	 });
	 
	 function change_captcha()
	 {
		document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
	 }
	 
	$('.provincia').empty();
	$('.provincia').append('<option value="0">Seleccione Provincia</option>');
	$.getJSON('json_provincias.php', function(data) {
 
    	console.log(JSON.stringify(data));
 		if(data[0].id!=0){
			for (var i=0; i<data.length; i++) {
									$('.provincia').append('<option value="' + data[i].id + '">' + data[i].literal + '</option>');
			}
		}
 
 
   });
   $('.provincia').change(function(){
		$('.municipio').empty();
		
		$.getJSON('json_poblaciones.php?provincia=' + $('.provincia').val() , function(data) {
	 
			console.log(JSON.stringify(data));
	 		if(data[0].id!=0){
				$('.municipio').append('<option value="0">Seleccione Municipio</option>');
				for (var i=0; i<data.length; i++) {
										$('.municipio').append('<option value="' + data[i].id + '">' + data[i].literal + '</option>');
				}
			}else{
				$('.municipio').append('<option value="0">Seleccione antes una provincia</option>');
			}
						   
	 
	 
	   });   			
   });
});
</script>
<script type="text/javascript">
	$.backstretch("./images/bg/fondo.jpg");
</script>
</head>
<body>
<div class="scanlines"></div>

<!-- Begin Header -->
<div class="header-wrapper opacity">
	<div class="header">
		<!-- Begin Logo -->
		<div class="logo">
		    <a href="index.html">
				<img src="images/logo.png" alt="" />
			</a>
	    </div>
		<!-- End Logo -->
		<!-- Begin Menu -->
		<div id="menu-wrapper">
			<div id="menu" class="menu">
				<ul id="tiny">
					<li><a href="index.html">Blog</a>
						<ul>
							<li><a href="post.html">Blog Post</a></li>
						</ul>
					</li>
					<li class="active"><a href="page-with-sidebar.html">Pages</a>
						<ul>
							<li><a href="page-with-sidebar.html">Page With Sidebar</a></li>
							<li><a href="full-width.html">Full Width</a></li>
						</ul>
					</li>
					<li><a href="typography.html">Styles</a>
						<ul>
							<li><a href="typography.html">Typography</a></li>
							<li><a href="columns.html">Columns</a></li>
						</ul>
					</li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
		</div>
		<div class="clear"></div>
		<!-- End Menu -->
	</div>
</div>
<!-- End Header -->

<!-- Begin Wrapper -->
<div class="wrapper"><!-- Begin Intro -->
<div class="intro">Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum, Vestibulum id ligula porta. </div>
<ul class="social">
<li><a class="rss" href="#"></a></li><li><a class="facebook" href="#"></a></li><li><a class="twitter" href="#"></a></li><li><a class="pinterest" href="#"></a></li><li><a class="dribbble" href="#"></a></li><li><a class="flickr" href="#"></a></li><li><a class="linkedin" href="#"></a></li></ul><!-- End Intro --> 

<!-- Begin Container -->
<div class="box">
		<h1 class="title">Registro</h1>
		<div class="info-box"><ul><li>La clave debe contener entre 4 y 15 caracteres</li><li>La clave debe contener entre 4 y 15 caracteres</li></ul></div>
        <form class='contacto'>
            <div><label>Usuario:</label><input type='text' class='usuario' value=''></div>
            <div><label>Clave:</label><input type='password' class='clave' value=''></div>
            <div><label>Confirmar Clave:</label><input type='password' class='clave2' value=''></div>        	
            <div><label>Nombre y Apellidos:</label><input type='text' class='nombre' value=''></div>
			<div><label>Email:</label><input type='text' class='email' value=''></div>
            <div><label>Provincia:</label></div>
            <div><select class="provincia">
                    <option value="0" selected>Cargando..</option>
		</select>
        	
            </div>
            <div><label>Municipio:</label></div>
            <div>
            	<select class="municipio">
                    <option value="0" selected>Seleccione antes una provincia</option>
				</select>
                
            </div>
            <div><label>Fecha de nacimiento:</label></div>
            <div><select class="dia">
<?php
	for($d=1;$d<=31;$d++)  
	{
		if($d<10) 
			$dd = "0" . $d; 
		else
			$dd = $d; 
		echo "            		<option value='$dd'>$dd</option>";
	}
?>
		</select>
		<select class="mes">
<?php
	for($m = 1; $m<=12; $m++)
	{
		if($m<10)
			$me = "0" . $m;
		else
			$me = $m;
		switch($me)
		{
			case "01": $mes = "Enero"; break;
			case "02": $mes = "Febrero"; break;
			case "03": $mes = "Marzo"; break;
			case "04": $mes = "Abril"; break;
			case "05": $mes = "Mayo"; break;
			case "06": $mes = "Junio"; break;
			case "07": $mes = "Julio"; break;
			case "08": $mes = "Agosto"; break;
			case "09": $mes = "Septiembre"; break;
			case "10": $mes = "Octubre"; break;
			case "11": $mes = "Noviembre"; break;
			case "12": $mes = "Diciembre"; break;			
		}
		echo "            		<option value='$me'>$mes</option>";
	}
?>
		</select>
		<select class="anio">
<?php
	$tope = date("Y");
	$edad_max = 75;
	$edad_min = 13;
	for($a= $tope - $edad_max; $a<=$tope - $edad_min; $a++)
		echo "            		<option value='$a'>$a</option>"; 
?>
		</select>
            </div>            
            <div id="captcha-wrap">
                <div class="captcha-box">
                    <img src="get_captcha.php" alt="" id="captcha" />
                </div>
                <div class="text-box">
                    <label>Type the two words:</label>
                    <input name="captcha-code" type="text" id="captcha-code">
                </div>
                <div class="captcha-action">
                    <img src="images/refresh.jpg"  alt="" id="captcha-refresh" />
                </div>
            </div>
            <div class="centrado"><a class='button'>Enviar</a></div>
        </form>

</div>
<!-- End Container -->

</div>
<!-- End Wrapper -->

<!-- Begin Footer -->
<div class="footer-wrapper">
<div id="footer" class="four">
		<div id="first" class="widget-area">
			<div class="widget widget_search">
				<h3 class="widget-title">Search</h3>
				<form class="searchform" method="get" action="#">
					<input type="text" name="s" value="type and hit enter" onFocus="this.value=''" onBlur="this.value='type and hit enter'"/>
				</form>
			</div>
			<div class="widget widget_archive">
				<h3 class="widget-title">Archives</h3>
				<ul>
					<li><a href="#">September 2012</a> (6)</li>
					<li><a href="#">August 2012</a> (2)</li>
					<li><a href="#">July 2012</a> (2)</li>
					<li><a href="#">June 2012</a> (4)</li>
					<li><a href="#">May 2012</a> (3)</li>
					<li><a href="#">January 2012</a> (1)</li>
				</ul>
			</div>	
		</div><!-- #first .widget-area -->
	
		<div id="second" class="widget-area">
			<div id="twitter-2" class="widget widget_twitter">
					<h3 class="widget-title">Twitter</h3>
					
					<div id="twitter-wrapper">
						<div id="twitter"></div>
						<span class="username"><a href="http://twitter.com/elemisdesign">→ Follow @elemisdesign</a></span>
					</div>
			</div>
		</div><!-- #second .widget-area -->
	
		<div id="third" class="widget-area">
		<div id="example-widget-3" class="widget example">
			<h3 class="widget-title">Popular Posts</h3>
			<ul class="post-list">
			  	<li> 
			  		<div class="frame">
			  			<a href="#"><img src="images/art/s1.jpg" /></a>
			  		</div>
					<div class="meta">
					    <h6><a href="#">Charming Winter</a></h6>
					    <em>28th Sep 2012</em>
				    </div>
				</li>
				<li> 
			  		<div class="frame">
			  			<a href="#"><img src="images/art/s2.jpg" /></a>
			  		</div>
					<div class="meta">
					    <h6><a href="#">Trickling Stream</a></h6>
					    <em>5th Sep 2012</em>
				    </div>
				</li>
				<li> 
			  		<div class="frame">
			  			<a href="#"><img src="images/art/s3.jpg" /></a>
			  		</div>
					<div class="meta">
					    <h6><a href="#">Morning Glory</a></h6>
					    <em>26th Sep 2012</em>
				    </div>
				</li>
			</ul>
			
		</div>
		</div><!-- #third .widget-area -->
		
		<div id="fourth" class="widget-area">
		<div class="widget">
			<h3 class="widget-title">Flickr</h3>
			<ul class="flickr-feed"></ul>
			
		</div>
		</div><!-- #fourth .widget-area -->
	</div>
</div>
<div class="site-generator-wrapper">
	<div class="site-generator">Copyright Obscura 2012. Design by <a href="http://elemisfreebies.com">elemis</a>. All rights reserved.</div>
</div>
<!-- End Footer --> 
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>